<template>
	<view class="env-content">
		<uni-card>
			<uni-segmented-control :current="currentEnvIndex" :values="envTabs" @clickItem="onTabClick"
				styleType="button" activeColor="#4cd964"></uni-segmented-control>

			<swiper class="sensor-swiper" :indicator-dots="true" :autoplay="false">
				<swiper-item v-for="(pageSensors, pageIndex) in pagedSensors" :key="pageIndex">
					<view class="sensor-grid">
						<view v-for="(sensor, sensorIndex) in pageSensors" :key="sensorIndex" class="sensor-card">
							<view class="sensor-info">
								<text class="sensor-name">{{ sensor.description }}</text>
								<!-- 数据点：名字右上，值右下（值轮播） -->
								<view class="data-box">
									<swiper class="data-swiper" :autoplay="true" :interval="2000" :circular="true"
										:indicator-dots="false">
										<swiper-item v-for="(dt, dtIndex) in sensor.dataTypeList" :key="dtIndex">
											<text class="data-value">{{ dt.value }} {{ dt.unit }}</text>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-card>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const currentEnvIndex = ref(0);
	import envList from '@/static/data/sensorData.json'

	const envTabs = envList.map(env => env.envName)
	// 当前环境的传感器列表
	const currentSensors = computed(() => envList[currentEnvIndex.value].sensorList)


	function onTabClick(e) {
		currentEnvIndex.value = e.currentIndex
	}
	// 分页：每页最多8个传感器
	const pagedSensors = computed(() => {
		const size = 8
		const result = []
		for (let i = 0; i < currentSensors.value.length; i += size) {
			result.push(currentSensors.value.slice(i, i + size))
		}
		return result
	})
</script>

<style lang="scss" scoped>
	.env-content {
		::v-deep .uni-card {
			//控制卡片整体内边距
			padding-left: 0rpx !important;
			padding-right: 0rpx !important;
		}
		
		.sensor-swiper {
			padding-top: 5rpx;
			.sensor-grid {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				border-top: 1rpx solid #ccc;
				border-left: 1rpx solid #ccc;
				height: 100%;

				.sensor-card {
					width: 25%;
					height: 50%;
					/* 一行最多4个 */
					box-sizing: border-box;
					border-right: 1rpx solid #ccc;
					border-bottom: 1rpx solid #ccc;
					// padding: 20rpx 10rpx;
					text-align: center;
					background-color: #fff;

					.sensor-info {
						// flex: 1;
						// display: flex;
						// flex-direction: column;

						.sensor-name {
							font-size: 22rpx;
							/* 名字更小 */
							font-weight: bold;
							color: #333;
						}

						.data-box {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							height: 80rpx;

							.data-swiper {
								height: 100%;

								.data-value {
									font-size: 24rpx;
									/* 值稍大，突出显示 */
									//浅青绿
									// color: #8FBC8F;
									text-align: right;
								}
							}

						}
					}
				}

			}

		}

	}
</style>